<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>激光一体化导航敏感器</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/omsp/qv.css">
  <link rel="stylesheet" href="/omsp/qv-table.css">
  <script src="/static/js/jquery-3.6.0.min.js"></script>
  <script src="/static/js/xtool.js?12"></script>
  <script src="/omsp/qv.js"></script>
  <style>
    .FF {
      width: 30%;
      height: 100%;
      position: relative;
      padding: 6px 10px;
      overflow: auto;
    }

    .FF + .FF {
      border-left: 1px solid #ccc
    }

    .ex_w {
      width: 70% !important;
    }
  </style>
</head>
<body id="viewer" class="M1">
<div id="CCC" style="padding: 4px 6px;display: flex;flex-direction: row">
  <button class="btn btn-primary btn-sm disactive-btn" onclick="main.realtime()" id="realtime">实时</button>
  <button class="btn btn-primary btn-sm mx-1" id="history" onclick="main.history()">历史</button>
  日期:
  <input id="day" type="date" value="">
  任务:
  <select id="task" class="sele-comp" onchange="main.onTask()" style="max-width: 280px;"></select>
  图像模式:
  <select id="modes" class="sele-comp pe-1" style="max-width: 120px;">
    <option value="">不限</option>
    <option value="0x33">MODE-A</option>
    <option value="0xEE">MODE-A+</option>
  </select>
  最大帧: <label id="frm_max" class="pe-1"></label>

  数据帧:<input id="frm_input" oninput="this.nextElementSibling.value=this.value" style="width: 100px" maxlength="4"
             onchange="main.onFrmi(this.value)" type="number">

  <input oninput="this.previousElementSibling.value=this.value" style="padding:0;width: 120px"
         id="frm_range" type="range" min="0" max="0" value="0" onchange="main.onFrm(this.value)">
  <span class="history">帧数/每页 <input type="number" id="psize" style="max-width: 100px;" onchange="main.onPageSize(this.value)"/></span>
  <button class="history btn btn-primary btn-sm ms-1" onclick="main.turnPage(false)">上一页</button>
  <button class="history btn btn-primary btn-sm mx-1" onclick="main.turnPage(true)">下一页</button>
  <div class="flex-grow-1"></div>
    <button class="btn btn-primary btn-sm"  onclick="main.exportCSV(this)"><i class="fa fa-file-text"></i>下载帧信息</button>

</div>
<div class="d-flex d-flex flex-column" style="height: calc(100vh - 40px);overflow-y: auto">
  <div class="flex-grow-1 d-flex">
    <div class="FF"></div>
    <div class="FF"></div>
  </div>
</div>
</body>
<script>
  // BE00090175026103
  // be00090175026000
  let aladar_params = [
        {n:"同步头", k: "header", r: '8X', v: ()=>'BE00090175026103'},
        {n:"时标", k: "timestamp"  , v:BJT },
        {n:"帧计数", k: "cnt"  , r: '4X'  },
        {n:"包号", k: "pkg_num"  , r: '4X'  },
  ]
  class FF {
    constructor(p, ob, n) {
      this.p = p;
      this.$o = ob;
      ob.innerHTML = `
            <div class="mtitle">${n}</div>
            <div class="minfo">
                <table class="table table-hover table-bordered table-sm small mt-2 mb-0">
                    <tbody class="info"></tbody>
                </table>
            </div>`
      this.$i = ob.querySelector('.info')
    }

    render_frame(d, index) {
      if (!d) {
        this.$i.innerHTML = ''
        return
      }
      if (!this.p.ws && this.p.$mode.value) {
        let infos = d.map(i => {
          let v = i.info
          let tds = this.p._params.map(c=>c.table_td(v)).join('')
          // return `<tr><td>${i.frm_}</td><td>BE00090175026103</td><td>${BJT(v.timestamp)}</td><td>${v.cnt}</td><td>${v.pkg_num}</td></tr>`
          return `<tr><td>${i.frm_}</td>${tds}</tr>`
        }).join('')
        this.$i.innerHTML = '<tr> <th>序号</th><th>同步头</th><th>时标</th><th>帧计数</th><th>包号</th></tr>' + infos
        return
      }
      let v = d.info;
      this.$i.innerHTML = this.p._params.map(c => {
          return c.view_tr(v)
      }).join('')
    }
  }

  MODE = {
    0x33: "MODE-A",
    0xEE: "MODE-A+"
  }


  /*st_frames = (frames) => {

    let r = {}
    let selected = $('#modes').val()
    frames.forEach(v => r[v.info.mode] = (r[v.info.mode] || 0) + 1)
    let fr = Object.keys(MODE).filter(v => r[v]).map(v => `<option value="${v}">${MODE[v]} / ${r[v]}</option>`)
    $('#modes').html(`<option value="">不限</option>` + fr.join(''))
    if (selected) $$('#modes').value = selected
  }*/

  class XPage extends Realtime {
    constructor() {
      super('ALADAR', $STATION, aladar_params);
      this.$psize = $$('#psize')
      let infos = Array.from($$$('.FF'))
      this.c = Object.keys(MODE).map((k, i) => {
        return {'k': k, 'i': i}
      }).reduce((acc, obj) => {
        acc[obj.k] = new FF(this, infos[obj.i], MODE[obj.k]);
        return acc;
      }, {})
      this.psize = 1000
      Object.values(this.c).forEach(i => i.$o.onmousewheel = this.onwheel.bind(this))
      this.cf = {}
      this.frames = this.frames_ori = []
      this.$day.onchange = this.onDay.bind(this)
      this.$task.onchange = this.onTask.bind(this)
      this.$mode.onchange = this.onModel.bind(this)
    }
    onPageSize(v){
      this.psize = v
    }
    async onTask() {
      this.reset()
      this.close()
      await this.load_frames(this.$task.value)
      this.onModel()
    }
    close() {
      this.viewer.className = 'M3'
      super.close();
    }
    connect() {
      this.viewer.className = 'M1'
      super.connect();
    }

    renderMode() {
      let r = {}
      let selected = $('#modes').val()
      this.frames_ori.forEach(v => r[v.info.mode] = (r[v.mode] || 0) + 1)
      let fr = Object.keys(MODE).filter(v => r[v]).map(v => `<option value="${v}">${MODE[v]} / ${r[v]}</option>`)
      $('#modes').html(this.ws?`<option value="">不限</option>` + fr.join(''):fr.join(''))
      this.$mode.value = selected
      selected = this.mode
      if (this.ws) {
        this.$mode.selectedIndex = 0
      }else{
        if(!selected) this.$mode.selectedIndex = 0
      }
      selected = this.mode
      this.filter_frames(selected)

      if (this.c[selected]) {
        Object.values(this.c).map(o => o.$o.style.display = 'none')
        this.c[selected].$o.style.display = 'block';
        this.c[selected].$o.classList.add('ex_w')
        // this.history()
      } else {
        Object.values(this.c).map(o => {
          o.$o.style.display = 'block';
          o.$o.classList.remove('ex_w')
        })
      }
    }

    reset() {
      this.frames_ori = []
      this.$frmx.innerText = this.$frmi.textContent = this.$frmi.value = ''
      this.frame_max = 0
      this.$frmr.value = 0
      this.renderMode()
      this.clearFrmInfo()
    }

    async onDay() {
      this.close()
      this.cur_task = ''
      let day = this.$day.value
      if (!day) return
      await this.load_task(day, true)
    }

    onFrm(frmId) {
      frmId = parseInt(frmId);
      this.clearFrmInfo()
      this.seek(frmId)
    }

    onwheel(e) {
      if (e.shiftKey) return
      if (this.$mode.value && (!this.ws)) this.turnPage(e.wheelDelta < 0)
    }

    turnPage(nextFlag) {
      let val = parseInt(this.$frmr.value)
      let next = val + (nextFlag ? +this.psize : -this.psize)
      next = Math.max(next, 0)
      let max = parseInt(this.$frmr.max)
      next = Math.min(max,next)
      this.frame_index = next;
      this.showframe(this.frames[next], true);
    }
    get maxPage(){
      let size = this.frames.length
      let tempNum = parseInt(size/this.psize)
      let pages = Math.ceil(size/(Math.max(this.psize, 1)))
      return pages
    }
    set psize(v){
      v = parseInt(v)
      v = Math.max(v, 1)
      this.$psize.value = this.$frmr.step = this._psize = v
      return v
    }
    get psize(){
      return this._psize
    }
    filter_frames(mode) {
       this.frames = this.frames_ori.filter(
          v => ((!mode) || v.info.mode == mode)
        ).map(
          (v, i) => Object.assign(v, {frm_: i})
        );
        this.resetFrmInput()
    }

    async load_frames(mode) {
      // alert('haha');
      await super.load_frames(mode)
      this.renderMode()
      // st_frames(this.frames_ori);
    }

    async newframe(d) {
      super.newframe(d);
      // st_frames(this.frames_ori)
      this.renderMode()
      await this.showframe(d, false);
    }

    clearFrmInfo() {
      Object.values(this.c).forEach(v => v.render_frame(undefined))
    }

    onModel() {
      this.close()
      this.set_ff(this.mode)
    }

    set_ff(ffid) {
      ffid = this.ff = parseInt(ffid)
      this.filter_frames(ffid)

      this.$mode.value = ffid || 0;
      if (this.c[ffid]) {
        Object.values(this.c).map(o => o.$o.style.display = 'none')
        this.c[ffid].$o.style.display = 'block';
        this.c[ffid].$o.classList.add('ex_w')
        // this.history()
      } else {
        Object.values(this.c).map(o => {
          o.$o.style.display = 'block';
          o.$o.classList.remove('ex_w')
        })
      }
      this.clearFrmInfo();
      this.seek(this.frames.length - 1)

    }

    params(v) {
      this.showframe(v)
    }

    async showframe(d, _) {
      let index = 0;
      let dd;
    /*  if(this.frames.length>0){
        this.$frmx.innerText = this.$frmr.max = this.frames.length - 1;
      }else{
        this.$frmr.max = 0
        this.$frmx.innerText = ''
      }*/
      if (MODE[this.$mode.value]) {
        index = this.frames.indexOf(d);
        dd = this.frames.slice(index, index + this.psize)
      } else {
        this.frames = this.frames_ori
        index = this.frames.indexOf(d)
        dd = d
      }
     this.frame_index = index
      if (dd) this.c[d.info.mode].render_frame(dd, index)

      return index
    }

    async newtask(d) {
      let t = await super.newtask(d);
      this._task = new Task(d.task)
      this.cur_task = d.task
      // st_frames(this.frames_ori)
      this.renderMode()
      this.cf = {}
      this.frames_ori.forEach(v => this.cf[v.info.mode] = v);
      this.set_ff(0)
      this.frames = this.frames_ori;
      Object.values(this.cf).forEach(v => this.showframe(v, false))
      this.$mode.selectedIndex = 0;
      return t;
    }
  }

  main = new XPage()
  main.realtime()

</script>
</html>